<template>
  <div>
    <a-input v-bind="$attrs" v-model="modelValue">
      <template #append>
        <a-button @click="handleClick()">
          <template #icon>
            <icon-more />
          </template>
        </a-button>
      </template>
    </a-input>
    <a-drawer
      :width="drawerConfig.width"
      :visible="drawerConfig.visible"
      @ok="handleOk"
      @cancel="handleCancel"
      unmountOnClose
    >
      <template #title>自定义设置</template>
      <div>
        <MonacoEditorView
          ref="MonacoEditRef"
          v-model="editJson"
          :language="language"
          :width="drawerConfig.widthEditor()"
          height="84vh"
        ></MonacoEditorView>
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, computed } from "vue";
import { useVModel } from "@vueuse/core";
import MonacoEditorView from "@/components/MonacoEditor/index.vue";
export default defineComponent({
  name: "MonacoEditor",
  components: { MonacoEditorView },
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "string",
    },
  },
  emits: {
    "update:modelValue": (value: string) => true,
  },
  setup(props, { emit }) {
    const modelValue = useVModel(props, "modelValue", emit);
    const editJson = ref();
    const language = computed(() => {
      if (props.type == "array") {
        return "json";
      }
      return "javascript";
    });
    const MonacoEditRef = ref(null);

    const drawerConfig = reactive({
      key: "",
      visible: false,
      title: "",
      width: 620,
      widthEditor: () => {
        return drawerConfig.width - 50;
      },
    });
    const handleClick = () => {
      editJson.value = modelValue.value;
      drawerConfig.visible = true;
    };
    const handleOk = () => {
      modelValue.value = editJson.value;
      drawerConfig.visible = false;
    };
    const handleCancel = () => {
      drawerConfig.visible = false;
    };
    return {
      MonacoEditRef,
      modelValue,
      language,
      editJson,
      handleClick,
      drawerConfig,
      handleOk,
      handleCancel,
    };
  },
});
</script>

<style scoped>
</style>